<template>
  <div class="RollerComparison-container">
    <div id="map"></div>
    <!-- 左侧年份选择 -->
    <div class="year-left-wrapper">
      <div class="year-resu">
        <div class="year-cont" @click="handleShow">{{this.showYear}}</div>
      </div>
      <div class="year-list" v-if="showYearDrop">
        <div
          class="year-item"
          v-for="item in imgDataList"
          :key="item.id"
          @click="selectYearName(item)"
        >{{item}}</div>
      </div>
    </div>
    <!-- 中间火区选择 -->
    <div class="center-select">
      <input
        class="select-value"
        placeholder="请选择火区"
        v-model="fireNameTest"
        @click="handleFirelistActive"
      />
      <div class="select-table" v-if="firelistActive">
        <div
          class="table-item"
          v-for="item in CenterFireList"
          :key="item.id"
          @click="handleFireName(item)"
          :title="item.fireName"
        >{{item.fireName}}</div>
      </div>
    </div>

    <div v-show="false">
      <div
        class="ol-control ol-unselectable my-swipe"
        :style="{pointerEvents: isMoving?'auto':'none'}"
        ref="mySwipe"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      >
        <div
          class="my-swipe-line swipe-horizontal"
          :style="{left:swipeVal+'%',pointerEvents:isMoving?'none':'auto'}"
        >
          <span
            class="my-swipe-line-btn"
            :style="{pointerEvents:isMoving?'none':'auto'}"
            @mousedown="mouseDown"
          >
            <img :src="require('../../../../../assets/img/OneMap/双向.png')" alt="拖动" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import Control from "ol/control/Control";
import TileWMS from "ol/source/TileWMS";
import { FireArea } from "../../../../../api/gis/layer";
import { FireImageList } from "../../../../../api/gis/layer";
import { FireAreaByName } from "../../../../../api/gis/layer";
import { Message } from "element-ui";

export default {
  data() {
    return {
      swipeLayer: null,
      isMoving: false,
      swipeVal: 50,

      fireNameTest: "",
      fireId: 0,
      firelistActive: false,

      map: undefined,

      firelistActive: false,
      SearchLable: "",

      showYear: "请选择目标影像",

      showYearDrop: false,

      CenterFireList: [],
      imgDataList: [],
      // imgAddressList: [],
      // imgBasenameList: [],
      imgObj: []
    };
  },
  mounted() {
    this.handleMapInit();
    this.loadFireList();

    // 创建卷帘控件
    this.swipeControl = new Control({
      element: this.$refs["mySwipe"] // 创建卷帘接管的DOM
    });
    this.map.addControl(this.swipeControl); //将卷帘组件添加到地图上
  },

  methods: {
    // 年份选择判断校验
    handleShow() {
      if (this.imgDataList.length > 0) {
        this.showYearDrop = true;
      } else {
        Message({
          message: `请先选择火区或当前火区不存在影像数据`,
          type: "warning"
        });
      }
    },
    // 获取列表选择判断校验
    handleFirelistActive() {
      this.firelistActive = true;
      // 重新选择火区的时候初始化
      this.showYearDrop = false;
      this.imgDataList = [];
      this.showYear = "请选择目标影像";
    },
    // 加载火区列表获取获取名称-中间
    loadFireList() {
      FireImageList().then(res => {
        if (res.code === 200) {
          res.data.rows.forEach(item => {
            const listItem = {
              id: item.id,
              fireName: item.fireName
            };
            this.CenterFireList.push(listItem);
          });
        }
      });
    },
    // 获取选择传递影像参数信息
    handleFireName(e) {
      this.fireNameTest = e.fireName;
      this.fireId = e.id;
      this.firelistActive = false;
      this.handleFireListByName();
    },
    // 获取火区影像数据信息(通过监听)
    handleFireListByName() {
      FireAreaByName({ fireName: this.fireNameTest, id: this.fireId }).then(
        res => {
          if (res.code === 200) {
            this.imgObj = res.data.rows[0].cfeCoalfieldBasicImageList;
            res.data.rows.forEach(item => {
              const imgInfo = item.cfeCoalfieldBasicImageList;
              imgInfo.forEach(items => {
                this.imgDataList.push(items.imageTime); //火区影像服务时间选择列表
                // this.imgAddressList.push(items.imageAddress); //火区影像服务地址地址选择列表
                // this.imgBasenameList.push(items.imageName); //火区影像服务名称地址选择列表
              });
              // console.log(this.imgDataList);
              // console.log(this.imgAddressList);
              // console.log(this.imgBasenameList);
            });
          }
        }
      );
    },
    // 年份选择完成影像加载
    selectYearName(data) {
      // data表示时间2020-06-27
      this.showYear = data;
      this.showYearDrop = false;
      // 判断是否有影像存在，清空历史
      const layer = this.map.getLayers();
      if (layer.array_.length >= 2) {
        layer.array_.splice(1);
      }
      // 查找对应的服务地址和服务名称
      this.imgObj.forEach(item => {
        if (item.imageTime == data) {
          this.wmsAddress = item.imageAddress;
          this.wmsName = item.imageName;
        }
      });
      // 加载目标时间影像数据
      this.handleAddUnderLayer(this.map, this.wmsAddress, this.wmsName);
    },

    handleMapInit() {
      const map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
              crossOrigin: true
            })
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [90.16701, 44.6436],
          zoom: 12
        })
      });
      this.map = map;
    },
    handleAddUnderLayer(map, address, name) {
      // 加载wms图层
      const wmsLayer = new TileLayer({
        source: new TileWMS({
          url: address,
          //参数配置
          params: {
            //工作空间:服务名称
            LAYERS: name,
            format: "image/png",
            VERSION: "1.1.1"
          }
        })
      });
      map.addLayer(wmsLayer);
      this.setSwipeLayer(wmsLayer);
    },
    setSwipeLayer(layer) {
      this.unsetSwipeLayer();
      if (layer) {
        layer.on("prerender", this.prerender);
        layer.on("postrender", this.postrender);
        this.swipeLayer = layer;
      }
    },
    unsetSwipeLayer() {
      if (this.swipeLayer) {
        this.swipeLayer.un("prerender", this.prerender);
        this.swipeLayer.un("postrender", this.postrender);
        this.swipeLayer = null;
      }
    },
    prerender(e) {
      const ctx = e.context;
      const hOrw = ctx.canvas.width;
      const nVal = (hOrw * this.swipeVal) / 100; //根据分割线显示
      ctx.save();
      ctx.beginPath();
      ctx.rect(0, 0, nVal, ctx.canvas.height);
      ctx.clip(); // 裁剪

      this.map.render();
    },
    postrender(e) {
      const ctx = e.context;
      ctx.restore();
    },
    mouseMove(e) {
      if (!this.isMoving) return;
      const clientWidth = e.currentTarget.clientWidth;
      const clientHeight = e.currentTarget.clientHeight;
      const x = e.offsetX;
      const y = e.offsetY;
      if (x < 0 || x > clientWidth || y < 0 || y > clientHeight) return;
      this.swipeVal = (x / clientWidth) * 100;
    },
    mouseDown(e) {
      this.isMoving = true;
    },
    mouseUp(e) {
      this.isMoving = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.RollerComparison-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 999;

  #map {
    width: 100%;
    height: 100%;
  }
  .my-swipe {
    width: 100%;
    height: 100%;
    z-index: 110;
    background: none !important;
    padding: 0;
    pointer-events: none;
    .my-swipe-line {
      position: absolute;
      width: 1px;
      height: 100%;
      background: white;
      .my-swipe-line-btn {
        position: relative;
        display: block;
        top: 50%;
        width: 20px;
        height: 30px;
        margin-left: -10px;
        background: white;
        border: 1px #efefef solid;
        border-radius: 3px;
        cursor: col-resize;
        img {
          vertical-align: middle;
          border-style: none;
        }
      }
    }
  }
  .year-left-wrapper {
    z-index: 99999999999;
    position: absolute;
    top: 200px;
    left: 80px;
    width: 200px;
    height: 30px;
    .year-resu {
      background: url("../../../../../assets/img/OneMap/图层属性信息.png")
        no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      display: flex;
      direction: row;
      justify-content: space-between;
      align-items: center;

      .year-cont {
        width: calc(100% - 13px);

        font-family: "AlibabaPuHuiTi-2-85-Bold";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .year-list {
      width: 100%;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-x: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .year-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-family: "AlibabaPuHuiTi-2-55-Regular";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        padding-left: 15px;
        border-bottom: solid 1px#000000;
        cursor: pointer;
      }
    }
  }

  .center-select {
    z-index: 99999999999;
    position: absolute;
    left: 810px;
    top: 200px;
    width: 300px;
    .select-value {
      text-align: center;
      background: transparent; //去掉背景
      border: none; //去掉边框
      outline: none;
      width: 100%;
      height: 45px;
      font-family: "AlibabaPuHuiTi-2-55-Regular";
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      background: url("../../../../../assets/img/OneMap/选择背景.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .select-table {
      margin-left: 10px;
      width: 280px;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.7);
      /* 添加如下内容超出部分出现滚轮 */
      overflow-x: hidden;
      overflow-y: auto;
      // scrollbar-width: none; /* Firefox */
      // -ms-overflow-style: none; /* IE10+ */
      &::-webkit-scrollbar {
        display: none; /* ChromeSafari */
      }
      .table-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-family: "AlibabaPuHuiTi-2-55-Regular";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        padding-left: 15px;
        border-bottom: solid 1px#000000;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
